import { Layout, Menu } from "antd";
import SimpleBar from "simplebar-react";
import "simplebar-react/dist/simplebar.min.css";
import { ENV } from "@/utils/env";
import {
  UserOutlined,
  SafetyCertificateOutlined,
  WalletOutlined,
  TagOutlined,
  TrophyOutlined,
  SettingOutlined,
  NotificationOutlined,
  BugOutlined,
  TeamOutlined,
  AreaChartOutlined,
} from "@ant-design/icons";
import { useState } from "react";
import type { MouseEvent } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import type { Location, NavigateFunction } from "react-router-dom";
import { changeIsShowMenu } from "@/store/app/appSlice";
import { useMediaQuery } from "react-responsive";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import type { MenuProps } from "antd";

const { Sider } = Layout;

type MenuItem = Required<MenuProps>["items"][number];

export const items: MenuItem[] = [
  {
    key: "/user",
    icon: <TeamOutlined />,
    label: "用户信息",
    children: [
      {
        key: "/user-search",
        label: "查询用户",
      },
      {
        key: "/user-flow",
        label: "用户流水",
      },
    ],
  },
  {
    key: "/white",
    icon: <SafetyCertificateOutlined />,
    label: "白名单管理",
    children: [
      {
        key: "/white-register",
        label: "注册白名单",
      },
      {
        key: "/white-device",
        label: "提现账号绑定白名单",
      },
      {
        key: "/white-audit",
        label: "提现自动审核白名单",
      },
      {
        key: "/white-hold",
        label: "防刷拦截白名单",
      },
    ],
  },
  {
    key: "/withdraw",
    icon: <WalletOutlined />,
    label: "提现管理",
    children: [
      {
        key: "/withdraw-gear",
        label: "档位配置",
      },
      {
        key: "/withdraw-channel",
        label: "渠道提现平台开关",
      },
      {
        key: "/withdraw-record",
        label: "提现记录",
      },
    ],
  },
  {
    key: "/version",
    icon: <TagOutlined />,
    label: "版本管理",
    children: [
      {
        key: "/version-list",
        label: "版本列表",
      },
    ],
  },
  {
    key: "/ranking",
    icon: <TrophyOutlined />,
    label: "排行榜",
    children: [
      {
        key: "/ranking-list",
        label: "排行榜配置",
      },
    ],
  },
  {
    key: "/setting",
    icon: <SettingOutlined />,
    label: "配置",
    children: [
      {
        key: "/setting-country",
        label: "地区拦截配置",
      },
    ],
  },
  {
    key: "/notice",
    icon: <NotificationOutlined />,
    label: "公告管理",
    children: [
      {
        key: "/notice-list",
        label: "用户公告",
      },
    ],
  },
  {
    key: "/minigame",
    icon: <BugOutlined />,
    label: "小游戏",
    children: [
      {
        key: "/minigame-classify",
        label: "游戏分类",
      },
      {
        key: "/minigame-list",
        label: "游戏列表",
      },
    ],
  },
  {
    key: "/total",
    icon: <AreaChartOutlined />,
    label: "统计数据",
    children: [
      {
        key: "/total-user",
        label: "用户数据",
      },
      {
        key: "/total-sum",
        label: "综合数据",
      },
      {
        key: "/total-news",
        label: "新用户综合数据",
      },
      {
        key: "/total-retention",
        label: "留存数据",
      },
      {
        key: "/total-rerun",
        label: "数据导出",
      },
      {
        key: "/user-export",
        label: "用户数据导出",
      },
      {
        key: "/totla-date-export",
        label: "时间数据导出",
      },
    ],
  },
  {
    key: "/admin",
    icon: <UserOutlined />,
    label: "Admin管理",
    children: [
      {
        key: "/admin-user",
        label: "Admin用户",
      },
    ],
  },
];

export default function Aside() {
  const [collapse, setCollapse] = useState<boolean>(false);
  const { isShowMenu } = useAppSelector((state) => state.app);

  const isLG: boolean = useMediaQuery({ query: "(max-width: 1024px)" });

  const { pathname }: Location = useLocation();
  const navigate: NavigateFunction = useNavigate();
  const dispatch = useAppDispatch();

  return (
    <Sider
      width={isLG ? "100vw" : 260}
      collapsible={!isLG}
      collapsed={isLG ? false : collapse}
      theme="light"
      style={{
        display: isLG ? (isShowMenu ? "block" : "none") : "block",
        height: "100vh",
        position: isLG ? "fixed" : "sticky",
        background: isLG ? "rgba(0,0,0,0.5)" : "white",
        zIndex: 50,
        top: 0,
        left: 0,
      }}
      onCollapse={(
        collapse: boolean,
        type: "clickTrigger" | "responsive"
      ): void => {
        type == "clickTrigger" && setCollapse(collapse);
      }}
      onClick={(): void => {
        dispatch(changeIsShowMenu(false));
      }}
    >
      <div
        className="max-w-[260px] bg-white h-full"
        onClick={(e: MouseEvent<HTMLDivElement>): void => e.stopPropagation()}
      >
        <div className="px-[28px] py-[8px] flex h-[64px] items-center">
          <img
            className="max-w-[30px] max-h-[30px] w-full h-full object-contain"
            src="/logo.jpg"
          />
          {!isLG && collapse ? null : (
            <div className="flex flex-col justify-center ml-[8px]">
              <h3 className="text-[18px] font-bold">Diamond Galaxy</h3>
              <div className="text-[12px] text-[#919191]">{ENV}</div>
            </div>
          )}
        </div>
        <SimpleBar style={{ maxHeight: "calc(100vh - 64px - 48px)" }}>
          <Menu
            mode="inline"
            selectedKeys={[pathname]}
            defaultOpenKeys={[pathname?.split?.("-")?.[0]]}
            onClick={({ key }): void => {
              navigate(key);
              dispatch(changeIsShowMenu(false));
            }}
            items={items}
          />
        </SimpleBar>
      </div>
    </Sider>
  );
}
